<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-08-06 22:19:46
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-08-23 17:42:10
 * @FilePath: \g-selectDialog\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <h2>人员选择示例</h2>
    <el-button type="primary" @click="openUserSelector">选择人员</el-button>
    <el-button type="primary" @click="openUserSelectorSingle">选择人员单选</el-button>
    <el-button type="primary" @click="openUserSelectorLimit">选择人员限制3人</el-button>
    <div style="margin-top: 20px;">
      <p>已选择用户ID: {{ selectedIds.join(', ') }}</p>
      <p>已选择用户名: {{ selectedNames.join(', ') }}</p>
    </div>

    <el-button type="primary" @click="openDeptSelector">选择部门</el-button>
    <el-button type="primary" @click="openDeptSelectorSingle">选择部门单选</el-button>
    <el-button type="primary" @click="openDeptSelectorLimit">选择部门限制3个</el-button>
    <div style="margin-top: 20px;">
      <p>已选择部门ID: {{ selectedDeptIds.join(', ') }}</p>
      <p>已选择部门名: {{ selectedDeptNames.join(', ') }}</p>
    </div>

    <el-button type="primary" @click="openRoleSelector">选择角色</el-button>
    <el-button type="primary" @click="openRoleSelectorSingle">选择角色单选</el-button>
    <el-button type="primary" @click="openRoleSelectorLimit">选择角色限制3个</el-button>
    <div style="margin-top: 20px;">
      <p>已选择角色ID: {{ selectedRoleIds.join(', ') }}</p>
      <p>已选择角色名: {{ selectedRoleNames.join(', ') }}</p>
    </div>

    <el-button type="primary" @click="openDeptSelectorH5">部门H5</el-button>
    <el-button type="primary" @click="openDeptSelectorSingleH5">部门单选H5</el-button>
    <el-button type="primary" @click="openDeptSelectorLimitH5">部门限制3个H5</el-button>
    <div style="margin-top: 20px;">
      <p>已选择部门ID: {{ selectedDeptIdsH5.join(', ') }}</p>
      <p>已选择部门名: {{ selectedDeptNamesH5.join(', ') }}</p>
    </div>
    
    <el-button type="primary" @click="openUserSelectorH5">人员H5</el-button>
    <el-button type="primary" @click="openUserSelectorSingleH5">人员单选H5</el-button>
    <el-button type="primary" @click="openUserSelectorLimitH5">人员限制3人H5</el-button>
    <div style="margin-top: 20px;">
      <p>已选择用户ID: {{ selectedIdsH5.join(', ') }}</p>
      <p>已选择用户名: {{ selectedNamesH5.join(', ') }}</p>
    </div>
    <!-- 引用人员选择组件 -->
    <UserSelector 
      ref="userSelectorRef" 
      dept-data-api="/public/mockData/department.json" 
      role-data-api="/public/mockData/role.json"
      user-data-api="/public/mockData/user.json"/>
    <DeptSelector ref="deptSelectorRef" data-api="/public/mockData/department.json" />
    <RoleSelector ref="roleSelectorRef" data-api="/public/mockData/role.json" />
    <DeptSelectorH5 ref="deptSelectorH5Ref" data-api="/public/mockData/department.json" />
    <UserSelectorH5 ref="userSelectorH5Ref" dept-data-api="/public/mockData/department.json" 
                                            user-data-api="/public/mockData/user.json"
                                            user-dept-id-key="departmentId"/>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserSelector from '@/components/UserSelector.vue'
import DeptSelector from '@/components/DeptSelector.vue'
import RoleSelector from '@/components/RoleSelector.vue'
import DeptSelectorH5 from './components/DeptSelectorH5.vue'
import UserSelectorH5 from './components/UserSelectorH5.vue'

const userSelectorRef = ref()
const selectedIds = ref([])
const selectedNames = ref([])

const userSelectorH5Ref = ref()
const selectedIdsH5 = ref([])
const selectedNamesH5 = ref([])

const deptSelectorRef = ref()
const selectedDeptIds = ref([])
const selectedDeptNames = ref([])

const deptSelectorH5Ref = ref()
const selectedDeptIdsH5 = ref([])
const selectedDeptNamesH5 = ref([])

const roleSelectorRef = ref()
const selectedRoleIds = ref([])
const selectedRoleNames = ref([])

const openUserSelector = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorRef.value.selectUser(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  })
}

const openUserSelectorSingle = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorRef.value.selectUser(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  },1)
}

const openUserSelectorLimit = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorRef.value.selectUser(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  },3)
}

const openDeptSelector = () => {
  // 调用选择器，传入已选中的部门ID
  deptSelectorRef.value.selectDept(selectedDeptIds.value, (result) => {
    // 处理选择结果
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  })
}

const openDeptSelectorSingle = () => {
  // 调用选择器，传入已选中的部门ID
  deptSelectorRef.value.selectDept(selectedDeptIds.value, (result) => {
    // 处理选择结果
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  },1)
}

const openDeptSelectorLimit = () => {
  // 调用选择器，传入已选中的部门ID
  deptSelectorRef.value.selectDept(selectedDeptIds.value, (result) => {
    // 处理选择结果
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  },3)
}

const openRoleSelector = () => {
  // 调用选择器，传入已选中的角色ID
  roleSelectorRef.value.selectRole(selectedRoleIds.value, (result) => {
    // 处理选择结果
    selectedRoleIds.value = result.ids
    selectedRoleNames.value = result.names
    console.log('选择的角色ID:', result.ids)
    console.log('选择的角色名:', result.names)
  })
}

const openRoleSelectorSingle = () => {
  // 调用选择器，传入已选中的角色ID
  roleSelectorRef.value.selectRole(selectedRoleIds.value, (result) => {
    // 处理选择结果
    selectedRoleIds.value = result.ids
    selectedRoleNames.value = result.names
    console.log('选择的角色ID:', result.ids)
    console.log('选择的角色名:', result.names)
  },1)
}

const openRoleSelectorLimit = () => {
  // 调用选择器，传入已选中的角色ID
  roleSelectorRef.value.selectRole(selectedRoleIds.value, (result) => {
    // 处理选择结果
    selectedRoleIds.value = result.ids
    selectedRoleNames.value = result.names
    console.log('选择的角色ID:', result.ids)
    console.log('选择的角色名:', result.names)
  },3)
}


const openDeptSelectorH5 = () => {
  // 调用选择器，传入已选中的部门ID
  deptSelectorH5Ref.value.selectDeptH5(selectedDeptIdsH5.value, (result) => {
    // 处理选择结果
    selectedDeptIdsH5.value = result.ids
    selectedDeptNamesH5.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  })
}

const openDeptSelectorSingleH5 = () => {
  // 调用选择器，传入已选中的部门ID
  deptSelectorH5Ref.value.selectDeptH5(selectedDeptIdsH5.value, (result) => {
    // 处理选择结果
    selectedDeptIdsH5.value = result.ids
    selectedDeptNamesH5.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  },1)
}

const openDeptSelectorLimitH5 = () => {
  // 调用选择器，传入已选中的部门ID
  deptSelectorH5Ref.value.selectDeptH5(selectedDeptIdsH5.value, (result) => {
    // 处理选择结果
    selectedDeptIdsH5.value = result.ids
    selectedDeptNamesH5.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  },3)
}

const openUserSelectorH5 = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorH5Ref.value.selectUserH5(selectedIdsH5.value, (result) => {
    // 处理选择结果
    selectedIdsH5.value = result.ids
    selectedNamesH5.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  })
}

const openUserSelectorSingleH5 = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorH5Ref.value.selectUserH5(selectedIdsH5.value, (result) => {
    // 处理选择结果
    selectedIdsH5.value = result.ids
    selectedNamesH5.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  },1)
}

const openUserSelectorLimitH5 = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorH5Ref.value.selectUserH5(selectedIdsH5.value, (result) => {
    // 处理选择结果
    selectedIdsH5.value = result.ids
    selectedNamesH5.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  },3)
}
</script>